<template>
  <div class="posttable">
    <el-row>
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <div class="addform addForm" v-if="form">
          <el-form label-position="top" ref="form" :model="form" :rules="rules">
            <el-row class="change">
              <el-col :span="5">
                <el-form-item prop="company" label="入职公司">
                  <el-input v-model.trim="form.company" placeholder="请输入入职公司" style="width: 274px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="department" label="部门">
                  <el-input v-model.trim="form.department" placeholder="请输入部门" style="width: 274px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="customer" label="服务客户" style="margin-bottom: 10px;">
                  <el-select
                    v-model="form.customer"
                    placeholder="请选择客户名称"
                    style="width: 274px"
                    @change="postHandler"
                  >
                    <el-option
                      v-for="(item,index) in customerNames"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="职位" prop="position">
                  <el-select v-model="form.position" placeholder="请选择职位">
                    <el-option
                      v-for="(item,index) in positionlist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="姓名" prop="name">
                  <el-input placeholder="请输入姓名" v-model.trim="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option
                      v-for="(item,index) in sexlist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="联系方式" prop="phone">
                  <el-input placeholder="请输入联系方式" v-model.trim="form.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="区域" prop="area">
                  <el-select placeholder="请选择区域" v-model="form.area">
                    <el-option
                      v-for="(item,index) in areallist"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="毕业时间" prop="graduationTime">
                  <el-date-picker
                    v-model="form.graduationTime"
                    type="month"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    placeholder="请选择毕业时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="入职时间" prop="entryTime">
                  <el-date-picker
                    v-model="form.entryTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择入职时间"
                    :picker-options="pickerBeginDateBefore"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="离职时间" prop="depatureTime">
                  <el-date-picker
                    v-model="form.depatureTime"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择离职时间"
                    :picker-options="pickerBeginDateAfter"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="试用期" prop="probationPeriod">
                  <el-input v-model.trim="form.probationPeriod" placeholder="请输入试用期"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="补助" prop="subsidy">
                  <el-input v-model.trim="form.subsidy" placeholder="请输入补助"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="薪资(单位(K))" prop="salary">
                  <el-input placeholder="请输入薪资上限" v-model.trim="form.salary"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item label="薪数" prop="salaryNum">
                  <el-input v-model.trim="form.salaryNum" placeholder="请输入薪数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="recommender" label="招聘专员">
                  <el-input
                    v-model.trim="form.recommender"
                    placeholder="请输入招聘专员"
                    style="width: 274px"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="离职状态" prop="quitState">
                  <el-select v-model="form.quitState" placeholder="请选择离职状态">
                    <el-option value="自离职" label="自离职"></el-option>
                    <el-option value="辞退" label="辞退"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-form-item prop="quitReason" label="离职原因" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.quitReason" placeholder="请输入离职原因" style="width: 274px">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="margin-top: 20px;">
              <el-button class="save" :disabled="savedis" @click="submitForm('form')">保存</el-button>
              <el-button class="canceL" @click="cancel('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
        <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import moment from "moment";
  import axios from "axios";
  
  export default {
    name: "addCustomer",
    props: {
      radio: {
        type: String
      }
    },
    data() {
      return {
        customerNames: [],
        sexlist: ["男", "女"],
        positionlist: [],
        areallist: [],
        savedis: false,
        cusId: null,
        form: {
          customer: "",
          recommender: "",
          quitState: "自离职",
          quitReason: '',
          name: "",
          sex: "男",
          phone: '',
          position: "",
          graduationTime: "",
          area: "",
          subsidy: "",
          salary: "",
          salaryNum: "13",
          company: "",
          department: "",
          probationPeriod: "",
          entryTime: "",
          depatureTime: ""
        },
        rules: {
          customer: [
            {required: true, message: "请选择服务客户姓名", trigger: "change"}
          ],
          recommender: [
            {required: true, message: "请输入招聘专员", trigger: "blur"}
          ],
          name: [{required: true, message: "请输入姓名", trigger: "blur"}],
          sex: [{required: true, message: "请选择性别", trigger: "blur"}],
          phone: [
            {
              required: true,
              pattern: /(^0\d{2,4}\-\d{7,8}$)|(^1[3|4|5|6|7|8|9][0-9]{9}$)/,
              message: '请输入正确的联系方式',
              trigger: 'blur'
            }
          ],
          company: [
            {required: true, message: "请输入入职公司", trigger: "blur"}
          ],
          department: [
            {required: true, message: "请输入部门", trigger: "blur"}
          ],
          position: [
            {required: true, message: "请选择职位", trigger: "change"}
          ],
          area: [{required: true, message: "请选择区域", trigger: "change"}],
          salary: [
            {required: true, pattern: /^\d{1,2}$/, message: "薪资为0-99的数字", trigger: "blur"}
          ],
          salaryNum: [
            {required: true, pattern: /^\d{1,2}$/, message: "薪数为0-99的数字", trigger: "blur"}
          ],
          probationPeriod: [
            {required: true, message: "请输入试用期", trigger: "blur"}
          ],
          subsidy: [{required: true, message: "请输入补助", trigger: "blur"}],
          graduationTime: [
            {required: true, message: "请选择毕业时间", trigger: "blur"}
          ],
          entryTime: [
            {required: true, message: "请选择入职时间", trigger: "blur"}
          ],
          depatureTime: [
            {required: true, message: "请选择离职时间", trigger: "blur"}
          ],
          'quitState': [
            {required: true, message: "请选择离职状态", trigger: "change"}
          ],
          quitReason: [
            {required: true, message: "请输入离职原因", trigger: "blur"}
          ]
        },
        errordialogVisible: false,
        errorinfo: null,
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.form.depatureTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') > this.form.depatureTime
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            if (this.form.entryTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') < this.form.entryTime
            }
          }
        }
      };
    },
    created() {
      //获取客户名称下拉框数据
      axios.post(this.url + "/resumeUpload/getCustomerNames").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      });
      //获取地区下拉框数据
      axios.get(this.url + "/demand/getAreas").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.areallist = res.data.data;
        }
      });
    },
    methods: {
      //选择客户名称获取职位名称的下拉框数据
      postHandler() {
        this.cusId = "";
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id;
          }
        }
        this.form.position = "";
        this.positionlist = [];
        axios
          .post(this.url + "/demand/getPostNameByCustomerId", {
            customerId: this.cusId + ""
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.positionlist = res.data.data;
            }
          });
      },
      //选择客户名称获取职位名称的下拉框数据
      postHandler1() {
        this.cusId = "";
        for (var i = 0; i < this.customerNames.length; i++) {
          if (this.form.customer == this.customerNames[i].name) {
            this.cusId = this.customerNames[i].id;
          }
        }
        this.positionlist = [];
        axios
          .post(this.url + "/demand/getPostNameByCustomerId", {
            customerId: this.cusId + ""
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.positionlist = res.data.data;
            }
          });
      },
      //初始化数据
      initdata() {
        this.form = {
          customer: "",
          recommender: "",
          quitState: "",
          quitReason: '',
          name: "",
          sex: "男",
          phone: '',
          position: "",
          graduationTime: "",
          area: "",
          subsidy: "",
          salary: "",
          salaryNum: "13",
          company: "",
          department: "",
          probationPeriod: "",
          entryTime: moment(new Date()).format("YYYY-MM-DD"),
          depatureTime: moment(new Date()).format("YYYY-MM-DD")
        };
        this.savedis = false;
        this.positionlist = [];
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.senddis = true;
            axios
              .post(
                this.url + "/entryquit/addQuitDetail",
                this.form
              )
              .then(res => {
                this.unlogin(res.data.code);
                if (res.data.code === 200) {
                  if (res.data.message == "success") {
                    this.savedis = false;
                    this.$emit("getData");
                  }
                  if (res.data.message == "存在此人信息") {
                    this.savedis = false;
                    this.errorinfo = res.data.message;
                    document.documentElement.style.overflow = "hidden";
                    this.errordialogVisible = true;
                  }
                }
                this.initdata();
                this.$refs.form.resetFields();
              });
            
          }
        });
      },
      cancel(formName) {
        this.savedis = false;
        this.$refs[formName].resetFields();
        this.$emit("getData");
      },
      //清除所有的校验信息
      resetFields(formName) {
        this.$refs[formName].resetFields();
      },
      errorinfoClose() {
        this.errorinfo = null;
        document.documentElement.style.overflow = "auto";
        this.errordialogVisible = false;
      }
    }
  };
</script>

<style scoped>
  .save {
    width: 150px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    margin-right: 43px;
    background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
  }
  
  .addform {
    color: #333 !important;
  }
  
  .save.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  }
  
  .canceL {
    width: 150px;
    height: 40px;
    border: 1px solid #4e6ef5;
    font-size: 16px;
    font-weight: 500;
    color: #4e6ef5;
  }
</style>
